<template>
  <div class="row padding-page q-mb-md justify-center q-mx-md">
    <!-- 下载QTL -->
    <q-card flat bordered class="col-11 col-md-12 q-mt-lg">
      <div
        class="q-pa-sm text-body2 text-bold text-white full-width bg-primary"
      >
        1. Download QTL results
      </div>
      <q-card-section class="no-padding text-body2">
        <q-tabs
          id="downloadTab"
          class="bg-secondary"
          active-class="shadow-3 bg-white"
          outside-arrows
          mobile-arrows
          no-caps
          stretch
          dense
          v-model="tab"
          align="left"
          narrow-indicator
        >
          <q-tab
            v-for="qtl in qtlTypeList"
            :key="qtl"
            :name="qtl"
            :label="rnaQTL(qtl)"
            class="text-body2"
          />
        </q-tabs>
        <q-tab-panels v-model="tab" animated>
          <q-tab-panel
            class="q-gutter-md row"
            v-for="qtl in qtlTypeList"
            :key="qtl"
            :name="qtl"
          >
            <q-btn
              v-for="cancer in cancerTypeList"
              no-caps
              unelevated
              color="grey-2"
              text-color="indigo-8"
              :key="cancer"
              :disable="!dataAvailable(qtl, cancer as cancerType)"
              size="12px"
              :label="`${cancer}-${rnaQTL(qtl)}`"
              :href="`data/download/${rnaQTL(qtl)}/${cancer}_${rnaQTL(
                qtl
              ).replace('-', '_')}.txt.gz`"
              style="width: max-content"
            />
          </q-tab-panel>
        </q-tab-panels>
      </q-card-section>
    </q-card>
    <!-- 下载GWAS -->
    <q-card flat bordered class="col-11 col-md-12 q-mt-lg">
      <div
        class="q-pa-sm text-body2 text-bold text-white full-width bg-primary"
      >
        2. Download GWAS-QTL results
      </div>
      <q-card flat bordered>
        <q-card-section class="q-pa-md q-gutter-md">
          <q-btn
            v-for="qtl in qtlTypeList"
            color="grey-2"
            text-color="indigo-8"
            :key="qtl"
            :label="`${rnaQTL(qtl)}`"
            :href="`data/download/GWAS-QTL/GWAS-${rnaQTL(qtl)}.txt.gz`"
            no-caps
            unelevated
            size="12px"
            style="width: max-content"
          />
        </q-card-section>
      </q-card>
    </q-card>
    <!-- 下载Survival -->
    <q-card flat bordered class="col-11 col-md-12 q-mt-lg">
      <div
        class="q-pa-sm text-body2 text-bold text-white full-width bg-primary"
      >
        3. Download survival-QTL results
      </div>
      <q-card>
        <q-card-section class="q-pa-m">
          <q-btn
            no-caps
            unelevated
            color="grey-2"
            text-color="indigo-8"
            label="All Survival-QTL"
            size="12px"
            :href="`data/download/survival-QTL/survival_mnvqtl_all.txt.gz`"
            style="width: max-content"
          />
        </q-card-section>
      </q-card>
    </q-card>
  </div>
</template>

<script setup lang="ts">
import type { cancerType } from 'src/interface/cancerType';
import type { qtlType } from 'src/interface/qtlType';
import { ref } from 'vue';

const cancerTypeList = [
  'ACC',
  'BLCA',
  'BRCA',
  'CESC',
  'CHOL',
  'COAD',
  'DLBC',
  'ESCA',
  'GBM',
  'HNSC',
  'KICH',
  'KIRC',
  'KIRP',
  'LAML',
  'LGG',
  'LIHC',
  'LUAD',
  'LUSC',
  'MESO',
  'OV',
  'PAAD',
  'PCPG',
  'PRAD',
  'READ',
  'SARC',
  'SKCM',
  'STAD',
  'TGCT',
  'THCA',
  'THYM',
  'UCEC',
  'UCS',
  'UVM',
];
const qtlCount = {
  cis: {
    apaQTL: [
      71, 1403, 2703, 842, 42, 948, 31, 834, 1024, 2386, 77, 2262, 1131, 208,
      3435, 813, 2338, 2372, 241, 1326, 592, 684, 3402, 0, 586, 369, 2224, 616,
      352, 366, 237, 31, 201,
    ],
    eQTL: [
      75, 2705, 8580, 1884, 0, 3010, 23, 477, 1197, 5233, 294, 10291, 3479, 840,
      12339, 2342, 5813, 4522, 251, 1139, 1285, 1010, 13762, 488, 1134, 273,
      2676, 1458, 16782, 1131, 603, 7, 398,
    ],
    lnceQTL: [
      255, 6247, 13100, 3009, 0, 5195, 6, 1728, 2352, 6449, 474, 10553, 6773,
      1723, 22286, 5561, 10196, 9937, 490, 3042, 4112, 3272, 18687, 578, 2835,
      387, 5804, 3126, 21484, 3008, 971, 18, 518,
    ],
    mireQTL: [
      0, 53, 53, 10, 1, 51, 0, 9, 0, 86, 3, 63, 47, 4, 91, 54, 41, 47, 0, 10,
      28, 4, 122, 10, 6, 6, 44, 2, 138, 16, 4, 0, 1,
    ],
    meQTL: [
      2396, 27666, 37492, 18760, 15, 22742, 439, 9822, 1102, 57983, 1208, 42871,
      27958, 9455, 62167, 22501, 55019, 32594, 4543, 0, 21539, 13652, 82651,
      5998, 11051, 4707, 27393, 6893, 83615, 10510, 6760, 820, 5526,
    ],
    sQTL: [
      790, 10542, 18191, 6417, 0, 8434, 156, 6832, 6225, 15105, 992, 22742,
      9204, 1413, 26738, 6527, 16445, 15787, 2022, 8706, 7359, 5688, 22481,
      2270, 7088, 2477, 11709, 5590, 26478, 4360, 2934, 281, 1291,
    ],
  },
  trans: {
    apaQTL: [
      55, 53, 40, 49, 6, 50, 1, 2, 0, 38, 194, 75, 110, 1, 100, 44, 93, 27, 2,
      6, 2, 60, 111, 0, 5, 8, 15, 10, 0, 2, 10, 16, 4,
    ],
    eQTL: [
      0, 22, 67, 15, 0, 48, 0, 10, 5, 46, 0, 40, 16, 0, 47, 1, 42, 60, 0, 7, 7,
      6, 105, 0, 7, 0, 34, 1, 140, 1, 0, 0, 0,
    ],
    lnceQTL: [
      43, 634, 1360, 434, 0, 677, 0, 216, 174, 911, 13, 1154, 642, 217, 1612,
      557, 890, 1040, 119, 353, 379, 343, 1697, 147, 311, 136, 491, 244, 1670,
      263, 326, 5, 116,
    ],
    mireQTL: [
      2, 2, 16, 0, 0, 0, 0, 0, 0, 0, 8, 1, 1, 0, 2, 2, 1, 23, 0, 0, 1, 2, 13, 0,
      1, 5, 4, 1, 28, 4, 0, 0, 0,
    ],

    meQTL: [
      23, 1796, 15884, 476, 2, 656, 0, 102, 0, 1884, 7, 2736, 2186, 212, 4061,
      854, 1561, 1237, 69, 0, 276, 448, 14542, 40, 219, 34, 29313, 191, 9070,
      275, 131, 3, 134,
    ],
    sQTL: [
      4948, 4730, 4478, 6330, 1041, 490, 225, 9375, 8541, 4521, 6994, 5459,
      7764, 7638, 7716, 4485, 5748, 8181, 4023, 11895, 12130, 11061, 9274, 4264,
      9871, 6816, 8995, 8035, 8904, 4191, 4921, 5026, 2131,
    ],
  },
};
const qtlTypeList: qtlType[] = [
  'apaQTL',
  'eQTL',
  'lnceQTL',
  'mireQTL',
  'meQTL',
  'sQTL',
];

const rnaQTL = (rawName: string) => {
  if (rawName == 'lnceQTL') {
    return 'lncRNA-eQTL';
  } else if (rawName == 'mireQTL') {
    return 'miRNA-eQTL';
  } else {
    return rawName;
  }
};

const tab = ref('apaQTL');

const dataAvailable = (qtl: qtlType, cancer: cancerType) =>
  qtlCount.cis[qtl][cancerTypeList.indexOf(cancer)] +
    qtlCount.trans[qtl][cancerTypeList.indexOf(cancer)] >
  0;
</script>

<style lang="scss">
#downloadTab .q-tab__label {
  font-size: 14px;
  font-weight: 500;
}
</style>
